<template>
    <div class="w-full h-full">
        <div v-if="videoList.length > 0" class="grid grid-cols-3 gap-4">
            <div v-for="item in videoList">
                <el-card class="w-full h-full " :body-style="{ padding: '0px' }">
                    <div style="background-image: url(https://img2.baidu.com/it/u=1532932313,1448370752&fm=253&fmt=auto&app=138&f=PNG?w=50&h=50)" class="bg-cover w-full h-52"></div>
                    <div style="padding: 14px">
                        <span>{{ item.title }}</span>
                        <div class="bottom">
                            <el-button type="primary" @click="goDetail(item)">查看</el-button>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { api } from '../../boot/api'
const router = useRouter()
const currentDate = ref(new Date())
let goDetail = (video) => {
    router.push({ name: 'watchVideo', query: { videoInfo: JSON.stringify(video) } })
}
let videoList = ref([])

api({
    url: '/videos',
    method: 'get'
}).then(res => {
    videoList.value = res.data.data
    videoList.value.sort((a, b) => {
        return a.index - b.index
    })
    console.log(videoList.value)
})


</script> 
 
<style scoped></style>
